<template>
<div class="head" :style="{position:fix==true?'fixed':'relative'}">
    <div class="top" :style="{height:`${scrollerHeight}px`,backgroundColor:fix==true?`rgba(252,252,252,${rgba})`:'#FFFFFF'}"></div>
    <div  v-if="flog" :class="['nav_bar',{'ss':color}]" :style="{backgroundColor:fix==true?`rgba(252,252,252,${rgba})`:'#FFFFFF'}">
        <div class="left"><slot name="left"></slot></div>
        <div class="center"><slot name="center">
          </slot>
          <p v-if="fix" :style="{opacity:`${rgba}`}">{{title}}</p>
        </div>
        <div class="right"><slot name="right"></slot></div>
  </div>
  <div class="line" v-if="flog">
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      scrollerHeight:44,
      rgba:0
    }
  },
  props: {
    fix: {
      type: Boolean,
      default:false
    },
    color: {
      type: Number,
    },
    title:{
      type:String
    },
    flog: {
      type: Boolean,
      default:true
    }
  },
  watch:{
    color(val){
      console.log(val,'哈哈')
    }
  },
  methods: {
    back(val){
      const pp = Math.abs(val)
      this.rgba = (pp/100).toFixed(1)
      // console.log(this.rgba,'傻逼')
      // if(pp>=1){
      //   this.rgba = 1
      // }
      // console.log(pp/100,'臭傻逼')
      // if(pp>=1){
      //     this.rgba = 1
      // } else {
      //   console.log('我进了')
         
      // }
    }
  }
}
</script>
<style scoped>
.head{
  position: relative;
  z-index: 9999999;
  top: 0px;
  left: 0px;
  right: 0px;
}
.nav_bar {
  display: flex;
  line-height: 88px;
  text-align: center;
  height: 88px;
  background: #ffffff;
  position: fixed;
  top: 88px;
  width: 100%;
  padding: 0px 30px;
  align-items: center;
}
.ss{
  background: #ffffff!important;
  transition: 0.5s;
}
.center {
  flex: 1;
}
.right{

}
.line{
    height: 88px;
}
.top{
  height: 44px;
  background: #ffffff;
}
</style>
